<!DOCTYPE html>
<html lang="cn" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <script src="/js/vue.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        /* 设置body元素的背景图片 */
        body {
            background-image: url('pic/bizhi.jpg');
            background-repeat: no-repeat; /* 背景图片不重复 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
        }

        *{
            font-family: 仿宋;
            margin: 0 auto;
            color: rgb(16, 91, 6);
        }
        a{
            text-decoration: none;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f5f5f5;
        }
        tr:nth-child(odd) {
            background-color: #ffffff;
        }
        tr:hover {
            background-color: #d1e8be;
        }

    </style>
</head>
<body id="app">
<div id="totals">
    <h2 style="text-align: center;margin-top: 30px;margin-bottom: 20px">我的购物车</h2>
    <table style="width: 800px;border: 1px solid black" cellpadding="0">
        <tr>
            <td>编号</td>
            <td>用户</td>
            <td>食品编号</td>
            <td>食品</td>
            <td>图片</td>
            <td>数量</td>
            <td>单价</td>
            <td>总价</td>
            <td>操作</td>
        </tr>
        <tr v-for="(cart,index) in this.cartList">
            <td v-text="cart.id"></td>
            <td v-text="cart.clients.name"></td>
            <td v-text="cart.foods.id" id="cartFoodsId"></td>
            <td v-text="cart.foods.name"></td>
            <td>
                <img v-bind:src="cart.foods.pic" width="80" height="100">
            </td>
            <td>
                <button v-on:click="subNum(index)">-</button>
                <span v-text="this.cartList[index].num" id="cartNum"></span>
                <button v-on:click="addNum(index)">+</button>
            </td>
            <td v-text="cart.foods.price"></td>
            <td v-text="cart.foods.price*cart.num"></td>
            <td>
                <button v-on:click="deleteCart(cart.id)">移除</button>
            </td>
        </tr>
    </table>
    <div style="width: 800px;margin-top: 20px">
        <div style="float: right;width: 80px;height: 35px;" >
            <button style="background-color: antiquewhite;border: none;border-radius: 5px;width: 70px;height: 35px;"><a href="/checkout.html"><span style="font-size: 20px">下单</span></a></button>
        </div>
        <div style="float: right;margin-right: 30px">
        <div style="margin-top: 5px">
            <span style="color:red;font-size: 20px;">
            总价：￥ <span>{{cartAllPrice}}</span>元
        </span>
        </div>
        </div>
    </div>
</div>
</body>
<script>

    //定义vue对象
    const app = {
        //属性
        data() {
            return {
                //购物车
                cartList: [],
                //购物车总价
                cartAllPrice:0
            }
        },
        // 计算属性
        computed: {
            // 计算购物车总价
            cartAllPrice: function() {
                let total = 0;
                this.cartList.forEach(cart => {
                    total += cart.foods.price * cart.num;
                });
                return total;
            }
        },
        //行为
        methods:{
            //按编号获取食品
            getCartByClientId:function (){
                console.log(window.location.search)
                axios({
                    method: "post", url: "/getCartByClientId", data: {}
                }).then((response) => {
                    this.cartList=response.data
                    console.log(this.cartList)
                    console.log(this.cartList[0])
                    this.updateCartAllPrice()
                });
            },

            //增加食品数量
            addNum:function (index){
                this.cartList[index].num=this.cartList[index].num+1
                this.updateCartAllPrice()
                this.updateCart(index)
            },
            //减少食品数量
            subNum:function (index){
                this.cartList[index].num=this.cartList[index].num-1
                this.updateCartAllPrice()
                this.updateCart(index)
            },

            // updateCartAllPrice: function () {
            //     this.cartAllPrice=0
            //     console.log("aa"+this.cartList.length)
            //     for(var i=0;i<this.cartList.length;i=i+1){
            //         this.cartAllPrice=this.cartAllPrice+this.cartList[i].foods.price*this.cartList[i].num
            //     }
            // },
            //计算购物车总价
            updateCartAllPrice(){
                this.cartAllPrice = this.cartList.reduce((total, cart) => {
                    return total + cart.foods.price * cart.num;
                }, 0);
            },

            //保存购物车
            updateCart:function (index){
                console.log("cc"+this.cartList[index].foodsId,)
                console.log("ac"+this.cartList[index].num)
                axios({
                    method: "post", url: "/updateCart", data: {
                        id:this.cartList[index].id,
                        num:this.cartList[index].num,
                        foodsId:this.cartList[index].foodsId
                    }
                }).then((response) => {
                    this.cartList=response.data
                    // window.location.reload() //刷新
                    this.getCartByClientId()
                });
            },

            //删除购物车
            deleteCart:function (id){
                console.log("查看"+id)
                axios({
                    method: "post", url: "/deleteCart", data: {
                        id:id
                    }
                }).then((response) => {
                    this.cartList=response.data
                    this.getCartByClientId()
                });
            },
        },
        //初始化
        mounted(){
            console.log("页面加载成功！")
            console.log("aac"+this.cartList.length)
            this.getCartByClientId()
        }
    }

    //启动vue
    Vue.createApp(app).mount("#app")
</script>
</html>